<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
  </head>
  <script src="../vue-2.6.11.js"></script>
  <body>
    <!-- 模板 -->

    <div id="example">{{ fullName }}</div>

    <script>
      //数据
      let data = {
        firstName: 'Foo',
        lastName: 'Bar',
        test: 1
        // fullName: 'Foo Bar'
      }

      //vm实例
      var vm = new Vue({
        el: '#example',
        data: data,
        watch: {
          firstName: function(newVal, oldVal) {
            this.fullName = newVal + ' ' + this.lastName
          },
          lastName: function(newVal) {
            this.fullName = this.firstName + ' ' + newVal
          },
          // watch 对象写法
          test: {
            deep: false,
            // immediate: true, // 立即触发
            handler: function(newVal, oldVal) {
              console.log(newVal)
            }
          }
        },

        // 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
        // 现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也相应地会被更新
        computed: {
          fullName: {
            // getter
            get: function() {
              return this.firstName + ' ' + this.lastName
            },
            // setter   vm.fullName = 'John Doe'
            set: function(newVal) {
              var names = newVal.split(' ')
              this.firstName = names[0]
              this.lastName = names[names.length - 1]
            }
          }
        }
      })
    </script>
  </body>
</html>
